<template>
  <basic-container>
    <div class="flex-center m-b-10">
      <el-button type="primary" @click="showAddFlag=true">新增一级分类</el-button>
    </div>

    <div>
      <el-tree :data="data" :props="{ children: 'children', label: 'label' }"
               default-expand-all @node-click="handleNodeClick"
               draggable
               :allow-drop="allowDrop"
               :allow-drag="allowDrag"
      >
        <template slot-scope="{ node, data }">
          <div style="width: 100%;" class="flex-center m-r-10" >
            <span >{{ data.label }}</span>
            <div @click.stop>
              <el-button type="text" v-if="node.level===1" @click="addNew(data)">添加</el-button>
              <el-button type="text" @click="editOne(data)">修改</el-button>
              <el-button type="text" @click="toRemove(data)">删除</el-button>
            </div>
          </div>
        </template>
      </el-tree>
    </div>
    <div class="h-100px"></div>

    <el-dialog :visible.sync="showAddFlag" append-to-body :title="data.id?'修改分类':'新增分类'" width="500px">
      <el-form label-width="120px">
        <el-form-item label="分类名称">
          <el-input v-model="form.productName" size="small" style="width: 200px"/>
        </el-form-item>
<!--        <el-form-item label="productkey">-->
<!--          <el-input v-model="form.productKey" size="small" style="width: 200px"/>-->
<!--          <el-button class="m-l-10" type="text" @click="genCode">自动生成</el-button>-->
<!--        </el-form-item>-->
      </el-form>
      <div class="dividing-line m-t-20 m-b-20"></div>
      <div class="flex-end">
        <el-button size="small" @click="closeAddAndEdit">取消</el-button>
        <el-button :loading="submitLoading" size="small" type="primary" @click="doConfirm">确定</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>

<script>

import {confirmWarning} from "@/util/common-util";

export default {
  name: "ProductType",
  data() {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
        }, {
          label: '二级 2-2',
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
        }, {
          label: '二级 3-2',
        }]
      }],
      tableOptions: {
        // 配置表格选项
      },
      form: {},
      loading: false,
      showAddFlag: false,
      submitLoading: false,
    }
  },
  mounted() {
    this.query()
  },
  methods: {
    allowDrop(draggingNode, dropNode, type) {
      console.log('type', type)
      return dropNode.level === 1 && type !== 'inner'
    },
    allowDrag(data) {
      console.log('data', data)
      return data.level === 1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    query() {
      this.loading = true
      getIotProductPage({...this.page, ...this.search}).then(res => {
        this.data = getRecords(res)
        this.total = getTotal(res)
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },
    editOne(data) {
      this.showAddFlag = true
      this.form = {...data}
    },
    addNew() {
      this.showAddFlag = true
    },
    doConfirm() {
      if (isStringEmpty(this.form.productKey)) return msgError("请输入产品名称")
      if (isStringEmpty(this.form.productName)) return msgError("请输入productKey")
      this.submitLoading = true
      iotProductSubmit(this.form).then(res => {
        this.page.current = 1
        this.query()
        this.closeAddAndEdit()
      }).finally(_ => {
        this.submitLoading = false
      })
    },
    toDetail(row) {
      this.$emit('detail', row)
    },
    closeAddAndEdit() {
      this.showAddFlag = false
      this.form.productName = ''
      this.form.productKey = ''
    },
    toRemove(row) {
      confirmWarning('删除操作', `确定删除分类 ${row.productName} ？`, () => {
        iotProductRemove({ids: row.id}).then(res => {
          this.query()
          msgSuccess()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

/deep/ .el-tree-node .el-tree-node__content {
  background: #eeeeee !important;
}
/deep/  .el-tree-node__children .el-tree-node .el-tree-node__content {
  background: none!important;
}
///* 自定义一级行的背景颜色 */
//.first-level-node {
//  width: 100%;
//  background-color: #eeeeee; /* 你可以设置你想要的颜色值 */
//  color: #333; /* 设置文字颜色 */
//}
</style>
